<!--vue模板-->
<template>
  <div class="container">
    <div style="text-align: right">
      <el-button type="primary" style="margin: 0 10px 10px 0" @click="add"
        >新增字典</el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        label="行号"
        width="150"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="code"
        label="编码"
        width="230"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="name"
        label="名称"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="sorts"
        label="排序"
        width="150"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="230"
        header-align="center"
        align="center"
      />
      <el-table-column
        label="操作"
        width="230"
        header-align="center"
        align="center"
      >
        <template v-slot="{ row }">
          <el-button type="primary" :icon="Edit" circle @click="update(row)" />
          <el-button type="danger" :icon="Delete" circle @click="del(row.id)" />
        </template>
      </el-table-column>
    </el-table>

    <SaveOrUpdate
      ref="saveupdate"
      :visible="isShow"
      @close="isShow = false"
      @refreshData="init"
    />
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { getDicById } from "@/api/product/product.js";
import SaveOrUpdate from "@/views/product/dic/SaveOrUpdate.vue";
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
const tableData = ref([]);
const isShow = ref(false); //是否显示新增
const saveupdate = ref();

//定义属性
const props = defineProps({
  pid: {
    type: Number,
    required: true
  }
});

function update(row) {
  isShow.value = true;
  saveupdate.value.init(props.pid, row);
}

function add() {
  isShow.value = true;
  saveupdate.value.init(props.pid);
}

function del(id) {
  ElMessageBox.confirm("你确定要删除吗?", "Warning", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning"
  })
    .then(() => {
      //确定后 删除
      console.log(id);
    })
    .catch(() => {});
}

async function init() {
  let res = await getDicById(props.pid);
  if (res.code == 200) {
    tableData.value = res.data;
  }
}

onBeforeMount(() => {
  init();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.container {
  padding: 0;
}
</style>
